<template>
	<div class="content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">回收站</h2>
	    </div>
	    <div class="cloud-body">
			<Screen :list="search_config" :data="search_data"  @submit="onSearch"></Screen>
	    </div>
	    <div class="cloud-body">
	    	<div class="r-table">
		    	<div class="r-table-head">
		    		<div class="r-table-title"><i class="iconfont icon-menu1"></i>商品回收站列表</div>
		    	</div>
		    	
		        <Table :datas="datas" class="r-table-main" @select="onselect" :checkbox="checkbox" :stripe="stripe" :loading="loading" selectWhenClickTr>
		          <TableItem title="" prop="$serial" v-if="serial"></TableItem>
		          <!-- <TableItem title="编号" prop="order_sn"></TableItem> -->
		          <TableItem title="商品名称" prop="name" :width="180"></TableItem>
		          <TableItem align="center" title="产品图" prop="image" :width="100">
		              <div slot-scope="{data}" class="r-table-img">
		                <!-- {{data.image_list[0]}} -->
		                <img :src="data.image_list[0]">
		              </div>
		          </TableItem>
		          <TableItem align="center" title="是否上架">
		              <div slot-scope="{data}">
		                {{data.putaway == 1 ? '上架' : '下架'}}
		              </div>
		          </TableItem>
		          <TableItem title="单价（元）" prop="price" :width="120" align="center" ></TableItem>
		          <TableItem title="折扣" prop="price_discount" align="center"></TableItem>
		          <TableItem title="分类"  :width="80">
		              <div slot-scope="{data}">
		                 {{ intCleck(data.classify_id) }}
		              </div>
		          </TableItem>
		          <TableItem title="上传时间" prop="creation_time" :width="200" align="center"></TableItem>
		          <TableItem title="操作" align="center" :width="160">
		            <template slot-scope="{data}">
		              <div class="r-item-action">
		                <div @click="intRestore(datas, data)" class="r-action-button">恢复</div>
		                <div @click="intRemove(datas, data)" class="r-action-button">彻底删除</div>
		              </div>
		            </template>
		          </TableItem>
		          <div slot="empty">回收站中空空如也！</div>
		        </Table>
			    <div class="r-table-footer">
			    	<div><button @click="intRemove(datas,batch_val)" class="h-btn h-btn-no-border h-btn-text-blue">批量彻底删除</button></div>
			    	<div><Pagination v-model="pagination" @change="currentChange" :small="true" layout="total,pager,jumper"></Pagination></div>
			    </div>
			</div>
	    </div>
	</div>
</template>
<script type="text/javascript">
	//搜索组件
	import Screen from '@/components/screen'
	export default {

		name:"",
		data(){
			return {
				datatable_name:'goods',


				batch_val: [],
				//商品分类
				dataOption:[],
	            /**
	             * 搜索数据
	             * @type {[type]}
	             */
	            search_config: [
	                {
	                    type: 'input',
	                    label: '输入搜索',
	                    name: 'name',
	                    placeholder: '输入商品名称'
	                },
	                {
                        type:'date',
                        min_name:'startDate',
                        max_name:'endDate',
                        label:'上传时间',
                        format:'YYYY-MM-DD',
                        model:'range',               			//模式
                    }
	            ],
	            search_data: {
	                name: '',
	                startDate:'',
	                endDate:'',
	                deleted:0,
	            },

	            // 表格
				  show: false,
			      border: false,
			      stripe: false,
			      checkbox: true,
			      serial: false,
			      loading: true,
			      datas: [],

			      // 分页
			      pagination: {
			        page: 1,
			        size: 10,
			        total: 0
			      }

			}
		},
	    components: {
	       Screen
	    },
	    mounted(){
	    	this.getClassify();

	    	this.getTotal();

	    	this.getList();
	    },
		methods:{
	      /**
	       * 获取数据总数
	       */
	      async getTotal(){
	        let ret = await this.$cloud.name(this.datatable_name).where(this.search_data).count();
	        this.pagination.total = ret;
	      },

	      /**
	       * 获取商品列表
	       * @return {[type]} [description]
	       */
	      async getList(){
	        this.loading = true;
	        let ret = await this.$cloud.name(this.datatable_name).where(this.search_data).page(this.pagination.page,this.pagination.size).select();
	        console.log('数据',ret)
	        if(ret || ret.length == 0){
	          this.loading = false;
	          this.datas = ret;

	          console.log('ret',ret);
	        }else{
	          this.loading = false;
	          this.$Message.error('网络异常，请稍后重试！')
	        }
	      },

		    /**
		     * 获取商品分类列表
		     * @return {[type]} [description]
		     */
		    async getClassify(){
		      let ret = await this.$cloud.name('goods_classify').select();
		      if(ret){
		        this.dataOption = ret;
		        // this.loading = false;
		      }else{
		        this.$Message.error('网络异常，请稍后重试！')
		      }
		    },
		  /**
		   * 显示商品分类
		   * @param  {[type]} id [description]
		   * @return {[type]}    [description]
		   */
		  intCleck(id){
		    for(let key in this.dataOption){
		      if(this.dataOption[key]['_id'] == id){
		        return this.dataOption[key]['name'];
		      }
		    }
		  },


		  	/**
		  	 * 筛选数据
		  	 * @param  {[type]} data [description]
		  	 * @return {[type]}      [description]
		  	 */
			async onSearch(data){
			  data['deleted'] = 0;

		      if(data.startDate && data.endDate){
		        data['creation_time'] = ['>',data.startDate,'<',data.endDate]
		      }

		      this.search_data = data;
		      this.pagination.page = 1;

		      //重新获取数据
		      await this.getTotal();
		      await this.getList();

			  // console.log('搜索数据',data);
			},

		    onselect(data) {
		    	this.batch_val = data;
		    },

		    /**
		     * 恢复回收站中的商品
		     * @param  {[type]} datas [description]
		     * @param  {[type]} data  [description]
		     * @return {[type]}       [description]
		     */
		   	async intRestore(datas,data){
		      let _id = [];
		      if(Object.prototype.toString.call(data) == '[object Array]'){
		        for(let key in data){
		          _id.push(data[key]['_id'])
		        }
		      }else{
		        _id.push(data._id);
		      }

		      //恢复商品
		      let ret = this.$cloud.name(this.datatable_name).where({_id:['in',_id]}).update({deleted:1});
		      if(ret){
		        //重新获取数据
		        await this.getTotal();
		        await this.getList();
		        this.$Message.success('恢复商品成功！');
		      }else{
		        this.$Message.error('网络异常，请稍后重试！')
		      }
		   	},

		   	/**
		   	 * 测底删除
		   	 * @param  {[type]} datas [description]
		   	 * @param  {[type]} data  [description]
		   	 * @return {[type]}       [description]
		   	 */
	    	intRemove(datas, data) {
	    		if(data.length == 0){
		          this.$Message.error('请选中要删除的商品！')
		          return false;
		        }
			    this.$Confirm('您确定删除商品吗？彻底删除之后将不可恢复，请谨慎操作！', '删除商品！').then(async () => {
			      let _id = [];
			      if(Object.prototype.toString.call(data) == '[object Array]'){
			        for(let key in data){
			          _id.push(data[key]['_id'])
			        }
			      }else{
			        _id.push(data._id);
			      }

			      let ret = this.$cloud.name(this.datatable_name).where({_id:['in',_id]}).delete();
			      if(ret){
			      	//重新获取数据
			        await this.getTotal();
			        await this.getList();
			      	this.$Message.success('删除商品成功！');
			      }else{
					this.$Message.error('网络异常，请稍后重试！')
			      }
			    }).catch(() => {
			        this.$Message.error('取消');
			    });

	    		// console.log('加入回收站',data)
	        },


		    currentChange(value) {
		      console.log(value);
		    }
		}
	}
</script>
<style type="text/css" lang="less">
	.cloud-header{
		margin-bottom: 20px;
	}
	.r-title-h2{
		border-left: solid 5px #2d7bf4;
		padding-left: 10px;
		margin-bottom: 0px !important;
	}
	.r-table{
		.r-table-head{
			border-bottom: solid 1px #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20px;
			.r-table-title{
				color: #999;
				i{
					margin-right: 10px;
				}
			}
			.r-table-button{
				button{
					margin-left: 15px;
				}
				i{
					margin-right: 5px;
				}
			}
		}
		.r-table-main{
			border: none;
			th{
				background-color: #fff;	
			}
		}
		.r-item-action{
			display: flex; 
			align-items: center; 
			justify-content: center;
			.r-action-button{
				margin: 0px 5px;
				color: #3788ee;
				cursor: pointer;
			}
			.r-action-button:active{
				color: #2677dd;
			}
		}
		.r-table-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-items: center;
			padding-top: 20px;
			margin-top: 20px;
			border-top: 1px solid #eeeeee;
		}
	}

</style>
